<template>
  <Scroll :height="scrollConentHeight" :on-reach-bottom="scrollMore" :distance-to-edge="5">
    <h1>Charts 《剑与远征》数值模拟</h1>
    <Row :gutter="16">
      <Col :span="12">
        <div ref="chart1" style="height: 320px"></div>
      </Col>
      <Col :span="12">
        <div ref="chart2" style="height: 320px"></div>
      </Col>
    </Row>
    <h1>表格应用实例</h1>
    <ul class="demo-table-list">
      <li><a href="#dragAndDrop">拖拽表格</a></li>
      <li><a href="#nestedExpandTable">嵌套展开表格</a></li>
      <li><a href="#toggleColumn">自由列</a></li>
    </ul>
    <h2 id="dragAndDrop">拖拽表格</h2>
    <ExampleCode>
      <template slot="demo">
        <Table
          size="small"
          ref="table1"
          :data="data1"
          :columns="cols1"
          highlight-row
          stripe
          draggable
          @on-select="table1Select"
          @on-drag-drop="table1DragDrop"
          @on-select-all="table1selectAll"
          @on-selection-change="table1selectChange"
          @on-current-change="table1currentChange"
          :loading="loading"
          :max-height="360"
          border >
          <div slot="loading">
            <Spin>
<!--              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>-->
<!--              <div>Loading</div>-->
              <div class="loader">
                <svg class="circular" viewBox="25 25 50 50">
                  <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
                </svg>
              </div>
            </Spin>
          </div>
<!--          <div slot="header">-->
<!--            <center>Drag and Drop</center>-->
<!--          </div>-->
<!--          <div slot="footer">-->
<!--            <center>2020-07-21</center>-->
<!--          </div>-->
        </Table>
        <div>
          <Button type="info" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>导出表格数据
          </Button>
          <Button type="default" @click="checkAll(1, true)">设置全选</Button>
          <Button type="default" @click="checkAll(1, false)">取消全选</Button>
          <i-switch size="large" v-model="loading">
            <span slot="open">ON</span>
            <span slot="close">OFF</span>
          </i-switch>
        </div>
      </template>
      <template slot="code">{{code.table.drag}}</template>
    </ExampleCode>
    <h2 id="nestedExpandTable">嵌套展开表格</h2>
    <ExampleCode>
      <template slot="demo">
        <Table
          size="small"
          ref="table2"
          :data="data2"
          :columns="cols2"
          highlight-row
          stripe
          :max-height="360"
          :row-class-name="rowClassName"
          border >
          <div slot="loading">
            <Spin>
              <!--              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>-->
              <!--              <div>Loading</div>-->
              <div class="loader">
                <svg class="circular" viewBox="25 25 50 50">
                  <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
                </svg>
              </div>
            </Spin>
          </div>
          <div slot-scope="{row,index}" slot="expand">

          </div>
          <ButtonGroup slot-scope="{row,index}" slot="action">
            <Button type="primary" size="small" icon="md-trash" @click="log(row, index)">Del</Button>
            <Button type="error" size="small" icon="md-attach">Add</Button>
          </ButtonGroup>
        </Table>
        <div>
          <Button type="info" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>导出表格数据
          </Button>
        </div>
      </template>
      <template slot="code">{{code.table.expand}}</template>
    </ExampleCode>
    <h2 id="toggleColumn">自由列</h2>
    <ExampleCode>
      <template slot="demo">
        <Table
          size="small"
          ref="table3"
          :data="data3"
          :columns="cols3"
          stripe
          :height="320"
          border >
          <div slot="loading">
            <Spin>
              <div class="loader">
                <svg class="circular" viewBox="25 25 50 50">
                  <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
                </svg>
              </div>
            </Spin>
          </div>
        </Table>
        <div style="margin-top: 5px">
          <Page :total="40" size="small" show-elevator show-sizer @on-page-size-change="changePageSize" @on-change="changePage" />
        </div>
      </template>
      <template slot="code">{{code.table.page}}</template>
    </ExampleCode>
    <h1>Scroll 无限滚动</h1>
    <ExampleCode>
      <template slot="demo">
        <template v-for="content in infiniteScrollContent">
          <Alert :type="content.type" show-icon :key="content.id">
            {{content.title}}
            <Icon :type="content.icon" v-if="content.icon" slot="icon"></Icon>
            <span slot="desc">{{content.desc}}</span>
          </Alert>
        </template>
      </template>
      <template slot="code">{{code.scroll.code}}</template>
    </ExampleCode>
  </Scroll>
</template>

<script>
import echarts from 'echarts'
import { macarons, dark } from '_c/charts/theme.js'
import { on, off } from '@/libs/tools'
import ExampleCode from '_c/dapianzi/code-example'
import tableCode from '@/code/table'
import scrollCode from '@/code/scroll'
const expandRow = {
  template: `
    <div style="margin-left: 110px">
      <Row class="expand-row">
        <Col span="8">
          <span class="expand-key">生命值等级差</span>
          <span class="expand-value">{{ row.life_inc }}</span>
        </Col>
        <Col span="8">
          <span className="expand-key">攻击差</span>
          <span class="expand-value">{{ row.atk_inc }}</span>
        </Col>
        <Col span="8">
          <span className="expand-key">防御差</span>
          <span class="expand-value">{{ row.def_inc }}</span>
        </Col>
      </Row>
    </div>
  `,
  props: {
    row: Object
  }
}
const asyncExpandRow = {
  name: 'asyncExpandRow',
  template: `
    <div style="margin-left: 50px">
      <Table
        :data="rows"
        :columns="cols"
        size="small"
        ref="table"
        highlight-row
        :max-height="120"
      ></Table>
    </div>
  `,
  props: {
    row: Object
  },
  data: () => {
    return {
      rows: [],
      cols: [
        { title: '渠道', minWidth: 160, key: 'channel' },
        {
          title: '注册',
          minWidth: 100,
          key: 'reg',
          sortable: true
        },
        { title: '活跃', minWidth: 100, key: 'act' },
        { title: '充值', minWidth: 100, key: 'recharge' }
      ]
    }
  },
  methods: {
    getData () {
      this.$axios.get('/test/mock?action=table-expand&day=' + this.row.day).then(res => {
        this.rows = res.data.data
      })
    }
  },
  mounted () {
    this.getData()
  }
}
export default {
  name: 'test',
  components: {
    ExampleCode,
    expandRow,
    asyncExpandRow
  },
  data () {
    return {
      loading: true,
      dom1: null,
      dom2: null,
      levels: [
        [0, 0, 0, 0, 0, 0],
        [2498, 0, 204, 0, 34, 0],
        [2561, 63, 209, 5, 35, 1],
        [2626, 65, 214, 5, 36, 1],
        [2692, 66, 220, 6, 37, 1],
        [2759, 67, 225, 5, 38, 1],
        [2827, 68, 231, 6, 39, 1],
        [2897, 70, 237, 6, 40, 1],
        [2967, 70, 242, 5, 41, 1],
        [3039, 72, 248, 6, 42, 1],
        [3318, 279, 271, 23, 46, 4],
        [3392, 74, 277, 6, 47, 1],
        [3467, 75, 283, 6, 48, 1],
        [3544, 77, 289, 6, 49, 1],
        [3622, 78, 296, 7, 50, 1],
        [3701, 79, 302, 6, 51, 1],
        [3782, 81, 309, 7, 52, 1],
        [3864, 82, 316, 7, 53, 1],
        [3948, 84, 323, 7, 55, 2],
        [4033, 85, 329, 6, 56, 1],
        [4786, 753, 391, 62, 66, 10],
        [4874, 88, 398, 7, 67, 1],
        [4963, 89, 406, 8, 69, 2],
        [5054, 91, 413, 7, 70, 1],
        [5147, 93, 421, 8, 71, 1],
        [5241, 94, 428, 7, 73, 2],
        [5336, 95, 436, 8, 74, 1],
        [5433, 97, 444, 8, 75, 1],
        [5532, 99, 452, 8, 77, 2],
        [5633, 101, 460, 8, 78, 1],
        [5735, 102, 469, 9, 79, 1],
        [5839, 104, 477, 8, 81, 2],
        [5945, 106, 486, 9, 82, 1],
        [6052, 107, 495, 9, 84, 2],
        [6161, 109, 504, 9, 85, 1],
        [6273, 112, 513, 9, 87, 2],
        [6386, 113, 522, 9, 88, 1],
        [6501, 115, 531, 9, 90, 2],
        [6618, 117, 541, 10, 92, 2],
        [6737, 119, 551, 10, 93, 1],
        [8080, 1343, 661, 110, 112, 19],
        [8203, 123, 671, 10, 114, 2],
        [8329, 126, 681, 10, 116, 2],
        [8456, 127, 691, 10, 117, 1],
        [8585, 129, 702, 11, 119, 2],
        [8717, 132, 713, 11, 121, 2],
        [8851, 134, 724, 11, 123, 2],
        [8987, 136, 735, 11, 125, 2],
        [9125, 138, 746, 11, 127, 2],
        [9266, 141, 758, 12, 129, 2],
        [9409, 143, 769, 11, 131, 2],
        [9555, 146, 781, 12, 133, 2],
        [9730, 175, 793, 12, 135, 2],
        [9854, 124, 806, 13, 137, 2],
        [10007, 153, 818, 12, 139, 2],
        [10163, 156, 831, 13, 141, 2],
        [10321, 158, 844, 13, 143, 2],
        [10482, 161, 857, 13, 146, 3],
        [10646, 164, 871, 14, 148, 2],
        [10813, 167, 884, 13, 150, 2],
        [12695, 1882, 1038, 154, 177, 27],
        [12868, 173, 1052, 14, 179, 2],
        [13043, 175, 1067, 15, 181, 2],
        [13221, 178, 1081, 14, 184, 3],
        [13402, 181, 1096, 15, 186, 2],
        [13587, 185, 1111, 15, 189, 3],
        [13774, 187, 1127, 16, 192, 3],
        [13965, 191, 1142, 15, 194, 2],
        [14159, 194, 1158, 16, 197, 3],
        [14356, 197, 1174, 16, 200, 3],
        [14557, 201, 1191, 17, 203, 3],
        [14761, 204, 1207, 16, 205, 2],
        [14968, 207, 1224, 17, 208, 3],
        [15179, 211, 1242, 18, 211, 3],
        [15394, 215, 1259, 17, 214, 3],
        [15612, 218, 1277, 18, 217, 3],
        [15834, 222, 1295, 18, 220, 3],
        [16060, 226, 1314, 19, 224, 4],
        [16289, 229, 1332, 18, 227, 3],
        [16523, 234, 1351, 19, 230, 3],
        [19160, 2637, 1567, 216, 267, 37],
        [19402, 242, 1587, 20, 270, 3],
        [19647, 245, 1607, 20, 273, 3],
        [19897, 250, 1628, 21, 277, 4],
        [20151, 254, 1648, 20, 281, 4],
        [20410, 259, 1669, 21, 284, 3],
        [20672, 262, 1691, 22, 288, 4],
        [20939, 267, 1713, 22, 292, 4],
        [21211, 272, 1735, 22, 295, 3],
        [21487, 276, 1758, 23, 299, 4],
        [21769, 282, 1781, 23, 303, 4],
        [22054, 285, 1804, 23, 307, 4],
        [22345, 291, 1828, 24, 311, 4],
        [22641, 296, 1852, 24, 315, 4],
        [22941, 300, 1877, 25, 319, 4],
        [23247, 306, 1902, 25, 324, 5],
        [23558, 311, 1927, 25, 328, 4],
        [23874, 316, 1953, 26, 332, 4],
        [24196, 322, 1979, 26, 337, 5],
        [24523, 327, 2006, 27, 342, 5]
      ],
      cols1: [
        { type: 'selection', width: 50, align: 'center', fixed: 'left' },
        { title: '等级', minWidth: 100, key: 'lvl' },
        { title: '生命', minWidth: 100, key: 'life' },
        { title: '攻击', minWidth: 100, key: 'attack' },
        { title: '防御', minWidth: 100, key: 'defence' },
        { title: '生命增幅', minWidth: 100, key: 'life_inc' },
        { title: '攻击增幅', minWidth: 100, key: 'atk_inc' },
        { title: '防御增幅', minWidth: 100, key: 'def_inc' },
        {
          title: '操作',
          key: 'act',
          width: 160,
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.info('in coming')
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'md-help-circle'
                  }
                }),
                'Info'
              ]),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small',
                  icon: 'md-trash'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.error('in coming')
                  }
                }
              }, 'Del')
            ])
          }
        }
      ],
      cols2: [
        { type: 'selection', width: 60, align: 'center', fixed: 'left' },
        // { type: 'index', minWidth: 60, align: 'center', fixed: 'left' },
        { type: 'expand', width: 50, render: (h, params) => { return h(expandRow, { props: { row: params.row } }) } },
        { title: '等级', minWidth: 100, key: 'lvl' },
        {
          title: '生命',
          minWidth: 100,
          key: 'life',
          sortable: true
        },
        {
          title: '攻击',
          minWidth: 100,
          key: 'attack',
          sortable: true,
          filters: [
            { label: '500以下', value: 1 },
            { label: '500-700', value: 2 },
            { label: '700以上', value: 3 }
          ],
          filterMethod: (value, row) => {
            console.log(value, row)
            if (value === 1) {
              return row.attack < 500
            } else if (value === 2) {
              return row.attack >= 500 && row.attack < 700
            } else if (value === 3) {
              return row.attack >= 700
            }
          }
        },
        { title: '防御', minWidth: 100, key: 'defence' },
        { title: '操作', width: 160, align: 'center', slot: 'action' }
      ],
      cols3: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(asyncExpandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        { title: '日期', minWidth: 160, key: 'day' },
        {
          title: '注册',
          minWidth: 100,
          key: 'reg',
          sortable: true
        },
        { title: '活跃', minWidth: 100, key: 'act' },
        { title: '充值', minWidth: 100, key: 'recharge' }
      ],
      data3: [],
      code: {
        table: tableCode,
        scroll: scrollCode
      },
      infiniteScrollContent: [
        { id: 1, desc: 'fasd ag dapianzi carl ', title: 'You shall not pass', type: 'error' },
        { id: 1, desc: 'We don\'t talk any more ', title: 'Mary lives downstairs', type: 'info' },
        { id: 1, desc: 'Why do all good things come to an end ', title: 'Sometime sadness', type: 'success' },
        { id: 1, desc: '总会有一些 善良的狗 心中藏着秘密 ', title: '北方的女王', type: 'warning' },
        { id: 1, desc: 'Don\'t make me sad, don\'t make me sade', title: 'Born to die', type: 'success', icon: 'ios-planet-outline' }
      ],
      scrollConentHeight: '100%'
    }
  },
  computed: {
    dataOrigin () {
      let rows = this.levels.slice()
      let ret = []
      for (let [idx, row] of rows.entries()) {
        ret.push({
          lvl: idx + 1,
          life: row[0],
          attack: row[2],
          defence: row[4],
          life_inc: row[1],
          atk_inc: row[3],
          def_inc: row[5],
          _expanded: idx % 3 === 0,
          _disableExpand: idx % 5 === 0
        })
      }
      return ret
    },
    data1 () {
      return this.dataOrigin.slice(0, 20)
    },
    data2 () {
      return this.dataOrigin.slice(20, 50)
    },
    scrollLastId () {
      return this.infiniteScrollContent.length > 0
        ? this.infiniteScrollContent[this.infiniteScrollContent.length - 1].id
        : 0
    }
  },
  methods: {
    render () {
      let levels = []
      let series = [
        [], [], [], [], [], [], [], []
      ]
      for (let [idx, row] of this.levels.entries()) {
        levels.push(idx + 1)
        for (let i = 0; i < row.length; i++) {
          series[i].push(row[i])
        }
        series[6].push(idx > 0 ? row[1] - this.levels[idx - 1][1] : 0)

        let level = idx
        let mod = Math.floor(level / 20)
        series[7].push(2500 * Math.pow(Math.E, level / 50) + Math.pow(mod, 2) * 250 + 750 * mod)
      }
      const option1 = {
        title: {
          text: '等级属性',
          subtext: '',
          left: 'center'
        },
        grid: {
          top: '3%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: levels
          }
        ],
        yAxis: [
          {
            name: '数值值',
            type: 'value'
          },
          {
            name: '数值值',
            type: 'value'
          }
        ],
        series: [
          {
            name: '生命',
            type: 'line',
            data: series[0]
          },
          {
            name: '攻击',
            type: 'line',
            yAxisIndex: 1,
            data: series[2]
          },
          {
            name: '防御',
            type: 'line',
            yAxisIndex: 1,
            data: series[4]
          },
          {
            name: '模拟生命值',
            type: 'line',
            data: series[7]
          }
        ]
      }
      const option2 = {
        title: {
          text: '各等级属性差值',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: levels
          }
        ],
        yAxis: [
          {
            name: '数值值',
            type: 'value'
          },
          {
            name: '差差',
            type: 'value'
          }
        ],
        series: [
          {
            name: '生命差值',
            type: 'line',
            data: series[1]
          },
          {
            name: '攻击差值',
            type: 'line',
            data: series[3]
          },
          {
            name: '防御差值',
            type: 'line',
            data: series[5]
          },
          {
            name: '生命差差',
            type: 'line',
            data: series[6],
            yAxisIndex: 1
          }
        ]
      }
      echarts.registerTheme('macarons', macarons)
      echarts.registerTheme('dark', dark)
      this.$nextTick(() => {
        this.dom1 = echarts.init(this.$refs.chart1, 'dark')
        this.dom2 = echarts.init(this.$refs.chart2, 'dark')
        this.dom1.setOption(option1)
        this.dom2.setOption(option2)
        on(window, 'resize', this.resize)
      })
    },
    resize () {
      this.dom1.resize()
      this.dom2.resize()
    },
    exportData (id) {
      if (id === 1) {
        this.$refs.table1.exportCsv({
          filename: '拖拽Drag&Drop表格'
        })
      }
    },
    checkAll (id, status) {
      this.$refs['table' + id].selectAll(status)
    },
    table1Select (selected, current) {
      // all selected rows , current selected row
      console.log(selected, current)
    },
    table1selectAll (list) {
      // all row
      console.log(list)
    },
    table1selectChange (selected) {
      // current selected rows
      console.log(selected)
    },
    /**
     * @param drag index
     * @param drop index
     */
    table1DragDrop (drag, drop) {
      let item = this.levels.splice(drag, 1)
      this.levels.splice(drop, 0, item[0])
    },
    table1currentChange (curr, prev) {
      console.log(curr, prev)
    },
    rowClassName (row, idx) {
      return row.lvl % 6 === 0 ? 'ten' : ''
    },
    log () {
      console.log.apply(null, arguments)
    },
    mockTableData (page) {
      this.$axios.get('/test/mock?action=table&day=2020-07-30').then(res => {
        this.data3 = res.data.data
      })
    },
    changePage (page) {
      this.mockTableData(page)
    },
    changePageSize (size) {
      console.log(size)
    },
    scrollMore () {
      console.log('scroll more..')
      return new Promise((resolve, reject) => {
        this.$axios.get('/test/mock?action=scroll&id=' + this.scrollLastId).then(res => {
          if (res.data.code) {
            reject(new Error(res.data.msg))
          } else {
            this.infiniteScrollContent = this.infiniteScrollContent.concat(res.data.data)
            resolve()
          }
        })
      })
    }
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  },
  mounted () {
    this.render()
    this.mockTableData(0)
    this.$nextTick(() => {
      // 等其他组件处理完高度，再计算赋值
      this.scrollConentHeight = this.$parent.$el.clientHeight
    })
  }
}
</script>

<style>
  .demo-spin-icon-load{
    animation: rotate 1s linear infinite;
  }
  @keyframes rotate {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .circular {
     animation: rotate 2s linear infinite;
     height: 100%;
     transform-origin: center center;
     width: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
   }
  .loader {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 0 auto;
  }
  .path {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
    stroke-linecap: round;
  }
  .ten td {
    background-color: #e96900!important;
    color: #c3c3c3!important;
  }
  @keyframes dash{
    0% {stroke-dasharray:1,200;stroke-dashoffset:0}
    50% {stroke-dasharray:89,200;stroke-dashoffset:-35}
    to {stroke-dasharray:89,200;stroke-dashoffset:-124}
  }
  @keyframes color{
    0%, to{stroke:#d62d20}
    40% {stroke:#0057e7}
    66% {stroke:#008744}
    80%,90% {stroke:#ffa700}}
  td.ivu-table-expanded-cell{
    padding: 0
  }
  .demo-table-list li {
    line-height: 28px;
    margin: 15px;
    font-size: larger;
  }
</style>
